<template>
	<view class="content">
		<!-- 头部 -->
		<view class="order-top">
			<h2>周笔畅 2019LUNAR巡回演唱会 上海 <span>1张</span></h2>
			<view class="order-top-renzheng">
				<h4>票品提供方: 国泰信达</h4>
				<p><span>√</span>认证商家</p>
			</view>
			<p>时间: 2019-12-28 周六 19:00</p>
			<p>场馆:凯迪拉克中心</p>
			<p style="margin-bottom: 20rpx;">票面价:280票面 看台</p>
			<uni-list>
				<uni-list-item title="安心购 认证实家 担保交易 连座保证 7*12h客服" note="假一赔十·无需赔付·极速发货·条件退款" showArrow></uni-list-item>
			</uni-list>
		</view>
		<!-- 内容部分 -->
		<view class="order-center">
			<view class="order-center-neirong1">
				<view class="center">
					<p>配送方式</p>
					<span>现场取票</span>
				</view>
				<view class="center">
					<p>取票人姓名</p>
					<span>铁匠</span>
				</view>
				<view class="center">
					<p>取票人手机</p>
					<span>1771087778</span>
				</view>
				<li>
					取票说明: 现场付票方式及付票人请通过旺旺或电话与供票方联系确认，或以演出当天收到的系统短信为准。
				</li>
			</view>
			<view class="order-center-neirong2">
				<h3>退票手续费说明</h3>
				<p>
					在平台内购票后,如因买家原因无法正常观演.可在线申请有条件退故,退票手绿办理将收取票品实际支付金额(快递责/拆单费除外)20%-95%的手续费,具体标准如下
				</p>
				<p>1.退票日期距澳出开始日期>45天,手续费20%;</p>
				<p>2.退票日期距演出开始日期>21天且s45天，手续费50%;</p>
				<p>3.退票日期距演出开始日期>7天且s21天,手续费80%;</p>
				<p>4.退票日期距演出开始日期s7天,手续费95%;</p>
				<p>5.距高澳出开始时间24小时以内,不支持退款</p>
			</view>
		</view>
		<view class="kong">

		</view>
		<!-- 底部部分 -->
		<view class="order-bottom">
			<view class="order-xieyi">
				<svg t="1685101056339" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
					p-id="1863" width="26" height="26">
					<path
						d="M721.28 305.578667l-327.466667 328.533333-85.418666-149.504a35.925333 35.925333 0 0 0-49.066667-13.397333 35.925333 35.925333 0 0 0-13.44 49.066666l108.8 190.506667a36.053333 36.053333 0 0 0 58.026667 6.4l359.466666-360.576a36.010667 36.010667 0 0 0-0.085333-50.901333 35.712 35.712 0 0 0-50.773333-0.128zM512 0C229.205333 0 0 229.205333 0 512s229.205333 512 512 512 512-229.205333 512-512S794.794667 0 512 0z m311.082667 823.082667a437.717333 437.717333 0 0 1-139.904 94.293333c-54.186667 23.04-111.786667 34.602667-171.178667 34.602667-59.392 0-116.992-11.562667-171.221333-34.474667a440.448 440.448 0 0 1-139.861334-94.293333 437.717333 437.717333 0 0 1-94.293333-139.946667A436.608 436.608 0 0 1 71.936 512c0-59.392 11.605333-116.992 34.56-171.221333a440.448 440.448 0 0 1 94.293333-139.861334 437.717333 437.717333 0 0 1 139.861334-94.293333c54.314667-23.04 111.914667-34.645333 171.306666-34.645333 59.392 0 116.992 11.605333 171.178667 34.56 52.437333 22.186667 99.413333 53.845333 139.946667 94.293333 40.362667 40.362667 72.192 87.466667 94.293333 139.861333 22.997333 54.314667 34.56 111.914667 34.56 171.306667a437.461333 437.461333 0 0 1-128.853333 311.082667z"
						fill="#fb3777" opacity=".65" p-id="1864"></path>
				</svg>
				<p>阅读并同意<span>《用户授权协议》</span><span>《淘票票演出平台服务协》</span><span>《淘票票演出平台隐私权政策》</span></p>
			</view>
			<view class="vote-bottom-heji">
				<view class="heji-left">
					<p>应付</p>
					<li>540.00 <span>元</span></li>
				</view>
				<view class="heji-right">
					<button>提交订单</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f2f3f5;

		// 头部内容
		.order-top {
			padding: 20rpx;

			background-color: white;

			.order-top-renzheng {
				display: flex;
				margin-top: 10rpx;

				h4 {
					font-weight: initial;
					margin-right: 20rpx;
				}

				p {
					color: #fc3777;
					border: 1px solid #fc3777;
					height: 33rpx;
					line-height: 33rpx;
					font-size: 20rpx;
					padding: 0 10rpx 0 0;

					span {
						background-color: #fb3777;
						padding: 2rpx 10rpx;
						color: white;
						margin-right: 6rpx;
					}
				}
			}

			h2 {
				span {
					font-size: 26rpx;
				}
			}

			p {
				height: 55rpx;
				line-height: 55rpx;
			}
		}

		// 内容部分
		.order-center {
			background-color: #f2f3f5;

			.order-center-neirong1 {
				margin-top: 20rpx;
				padding: 0 20rpx;
				background-color: white;

				.center {
					color: #999999;
					height: 100rpx;
					line-height: 100rpx;
					display: flex;
					justify-content: space-between;
					border-bottom: 1px solid #efefef;

					span {
						color: #000;
						font-weight: 600;
					}
				}

				li {
					list-style: none;
					padding: 20rpx 0;
					font-size: 20rpx;
					color: #c0b6b7;
				}
			}

			.order-center-neirong2 {
				background-color: white;
				padding: 0 20rpx;
				margin-top: 20rpx;
				// margin-bottom: 300rpx;

				h3 {
					height: 90rpx;
					line-height: 90rpx;
				}

				p {
					line-height: 50rpx;
					font-size: 26rpx;
					color: #988c9a;
				}
			}
		}

		.kong {
			height: 290rpx;
		}

		// 底部内容
		.order-bottom {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			position: fixed;
			left: 0;
			right: 0;
			height: 250rpx;
			background-color: white;
			// background-color: brown;
			padding: 0 20rpx;
			/* #ifdef H5 */
			left: var(--window-left);
			right: var(--window-right);
			/* #endif */
			bottom: 0;

			box-shadow: 4px 4px 15px #7d7d7d;


			.order-xieyi {
				padding: 20rpx 0;
				display: flex;
				border-bottom: 1px solid #efeeee;

				p {
					color: #b3aab3;
					margin-left: 18rpx;
					font-weight: bold;
					font-size: 28rpx;

					span {
						color: #4a92ec;
					}
				}
			}

			.vote-bottom-heji {
				display: flex;
				justify-content: space-between;

				// margin-top: 20rpx;
				.heji-left {
					display: flex;

					p {
						color: #999999;
						font-size: 28rpx;
						margin-right: 20rpx;
						line-height: 100rpx;
					}

					li {
						color: #fb3777;
						font-size: 30rpx;
						font-weight: bold;
						list-style: none;
						line-height: 100rpx;

						span {
							font-size: 20rpx;
						}
					}
				}

				.heji-right {
					margin-top: 8rpx;
					button {
						background-color: #fb3777;
						color: white;
						padding: 0 100rpx;
						border-radius: 40rpx;
					}
				}


			}
		}
	}
</style>